<template>
  <!-- 不是行内form 行内inline=true -->
  <el-form label-width="80px" :model="spuInfo">
    <el-form-item label="SPU名称">
      <el-input v-model="spuInfo.spuName"></el-input>
    </el-form-item>
    <el-form-item label="品牌">
      <el-select placeholder="请选择品牌" v-model="spuInfo.tmId">
        <el-option :label="trademark.tmName" :value="trademark.id" v-for="(trademark,index) in trademarkList" :key="trademark.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SUP描述" value="">
      <el-input type="textarea" v-model="spuInfo.description"></el-input>
    </el-form-item>
    <!-- 照片墙 -->
    <el-form-item label="SPU图片">
      <!-- 
        action:上传图片的地址
        list-type:照片墙的烈性
        on-preview:放大属性(预览的钩子)
        on-remove:删除的钩子
        on-success:图片上传成功的回调
        file-list:照片墙需要展示数据的设置属性,数组,数组里面的元素要有name(图片的名字)与url(图片的地址)属性
       -->
      <el-upload
        action="/dev-api/admin/product/fileUpload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :file-list="spuImageList"
        :on-success="handlerSuccess"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-form-item>
    <!-- 销售属性 -->
    <el-form-item label="销售属性">
      <el-select placeholder="还有三个未选择" value="">
        <el-option label="颜色" value="value"></el-option>
        <el-option label="版本" value="value"></el-option>
        <el-option label="尺码" value="value"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-plus">添加销售属性</el-button>
      <!--  -->
      <el-table style="width: 100%; margin-top: 10px" border>
        <el-table-column label="序号" width="80px" type="index" align="center">
        </el-table-column>
        <el-table-column prop="prop" label="属性名" width="150px">
        </el-table-column>
        <el-table-column prop="prop" label="属性值名称列表" width="width">
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="150px">
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">保存</el-button>
      <el-button @click="changeScene">取消</el-button>
    </el-form-item>
    <h1>{{unSelectSaleAttr}}</h1>
  </el-form>
</template>

<script>
export default {
  name: "SpuForm",
  data() {
    return {
      // 照片墙的属性
      dialogImageUrl: "",
      dialogVisible: false,
      // 存储当前类的信息
      spuInfo: {
        category3Id: "", //三级分类的ID
        spuName: "", //收集SPU的名字
        tmId: "", //收集品牌的ID
        description: "", //收集类的描述信息
        spuImageList: [
          {
            imgName: "", //图片的名字
            imgUrl: "", //图片的地址
          },
        ],

        spuSaleAttrList: [
          //销售属性地方
          {
            baseSaleAttrId: "", //销售属性的ID
            saleAttrName: "", //销售属性的名字
            spuSaleAttrValueList: [
              //销售属性值的地方
              {
                baseSaleAttrId: 0, //当前销售属性值属于哪一个销售属性的
                saleAttrValueName: "", //销售属性值的名字
              },
            ],
          },
        ],
      },
      // 存储照片墙的数据
      spuImageList: [],
      // 存储品牌的数据
      trademarkList: [],
      // 存储销售属性的数据
      attrList: [],
    };
  },
  methods: {
    // 图片上传成功的回调
    handlerSuccess(response,file, fileList){
      // response:图片上传成功以后,服务器返回的相依的数据(包含远程图片的地址)
      // file  :图片上传后的信息 图片信息
      // fileList: 图片上传成功以后,照片墙一共有的信息
      this.spuImageList=fileList
    },
    //   删除
    handleRemove(file, fileList) {
      // 当照片删除的时候就会触发--收集
      // fileList:删除那张照片的信息
      // fileList:照片墙删除某一张照片之后剩余其他图片--(收集:数据里面name,url不要),最后整理
      this.spuImageList=fileList
    },
    //预览
    handlePictureCardPreview(file) {
      // 当用户点击照片墙的预览按钮就会触发,file形参就会注入的,看到图片信息(图片的地址名字)
      // 当点击预览按钮的时候,对话框展示出来,以及vc保存选中这张图片的路径,在对话框的img中显示
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 点击取消的回调函数
    changeScene() {
      this.$emit("changeScene", 0);
    },
    async initData(spuId) {
      // 第一个请求:通过类的id获取当前修改类的信息
      let promise1 = this.$ajax.spu.reqSpuById(spuId);
      // 第二个请求:通过类的id,获取照片墙的数据
      let promise2 = this.$ajax.spu.reqSpuImageList(spuId);
      // 第三个请求:获取品牌的数据
      let promise3 = this.$ajax.spu.reqTrademarkList();
      // 第四个请求:获取整个项目的全部的销售属性
      let promise4 = this.$ajax.spu.reqSaleAttrList();
      // 利用Promise.all获取全部返回成功的数据
      let arr = await Promise.all([promise1, promise2, promise3, promise4]);
      // 赋值
      this.spuInfo = arr[0].data;
      this.spuImageList = arr[1].data;
      this.trademarkList = arr[2].data;
      this.attrList = arr[3].data;
      // spu类的信息
    },
  },
  computed:{
    // 计算属性
    unSelectSaleAttr(){
      // 全部的销售属性3个
      // console.log(this.attrList);
      // 当前已有的销售属性
      // console.log(this.spuInfo.spuSaleAttrList);

     let result= this.attrList.filter(item=>{
        return this.spuInfo.spuSaleAttrList.every(item1=>{
          return   item.name!= item1.saleAttrName;
        })
     })
     return result;
    }
  }
};
</script>

<style>
</style>